<!--
 @description 添加标签
 @fileName index.vue
 @author zengqiongying
 @created 2022/11/08 19:23:12
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader title="添加标签" bg-color="#FAFBFE" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" :disabled="!enbleSubmit" @click="handlerConfirm">确定</van-button>
    </div>
    <div class="add-tag-page">
      <div class="tag-cate">
        <Scroll vertical height="100%">
          <div class="cate-list">
            <div
              v-for="l in labelCategoryDisList"
              :key="l.id"
              class="c-item"
              :class="{active: l.id === categoryId}"
              @click="handelrCategory(l)"
            >{{ l.name }}</div>
          </div>
        </Scroll>
      </div>
      <div class="tag-content">
        <div class="label-search">
          <van-search
            v-model="name"
            show-action
            class="search-field"
            placeholder="请输入标签名称"
            @search="handleSearch"
            @clear="handleSearch"
          >
            <template #action>
              <svg-icon class="icon-search" icon-class="sousuo-solid" @click.native.stop="handleSearch" />
            </template>
          </van-search>
        </div>
        <Scroll vertical height="100%">
          <div class="label-list">
            <div
              v-for="(item,i) in labelDisList"
              :key="i"
              class="c-item"
              :class="{'selected':selectedLabel.some(e=>e.id===item.id)}"
              @click="handlerClickLabel(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </Scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { bus } from '@/utils/bus'
import Scroll from '@/components/Scroll'
import { getLabelCategoryDisAll, queryMyDisInTenant, labelDisPage, queryByClueCustomerId, relaClueCustomerLabel } from '@/apis/customer'
export default {
  name: 'CustomerAddTag',
  components: { Scroll },
  data() {
    return {
      clueCustomerId: this.$route.query.id,
      fromSource: this.$route.query.source || 'mypool', // 来源： commonpool  公共客户池 ， mypool  我的客户池(潜客，意向客户)

      formData: {
        labelIds: []
      },
      // 分类
      disCodes: [],
      labelCategoryDisList: [],
      categoryId: '',
      labelDisList: [],
      name: '',
      selectedLabel: []
    }
  },

  computed: {
    enbleSubmit() {
      return this.selectedLabel.length > 0
    }
  },

  created() {
    this.getDisCodes()
  },
  activated() {},

  mounted() {},

  methods: {
    getDisCodes() {
      queryMyDisInTenant().then(res => {
        this.disCodes = res.data.map(e => e.code)
        this.getCategoryData()
      })
    },
    handelrCategory(l) {
      this.categoryId = l.id
      this.getLabelDisPage()
    },
    getCategoryData() {
      const headers = {
        'Permission-PerCode': 'my_customer_pool',
        'Permission-App': 'top2-crm-app'
      }
      getLabelCategoryDisAll(this.disCodes, headers).then(res => {
        this.labelCategoryDisList = res.data.records
        if (this.labelCategoryDisList[0]) {
          this.handelrCategory(this.labelCategoryDisList[0])
        }
      })
      queryByClueCustomerId(this.clueCustomerId).then(res => {
        this.selectedLabel = res.data.map(e => {
          return {
            'categoryId': e.labelCategoryId,
            'categoryName': e.categoryName,
            'id': e.labelId,
            'name': e.labelName
          }
        })
      })
    },
    // 查询标签
    getLabelDisPage() {
      const data = new FormData()
      data.append('pageFlag', false)
      const filtersRaw = [{ id: 'enable', property: 'enable', value: '1', operator: '=' }]
      filtersRaw.push({ id: 'categoryId', property: 'categoryId', value: this.categoryId, operator: '=' })
      if (this.name) {
        filtersRaw.push({ id: 'name', property: 'name', value: this.name, operator: 'like' })
      }
      data.append('filtersRaw', JSON.stringify(filtersRaw))
      const headers = {
        'Permission-PerCode': this.fromSource === 'commonpool' ? 'common_customer_pool' : 'my_customer_pool',
        'Permission-App': 'top2-crm-app'
      }
      labelDisPage(data, headers).then(res => {
        const t = [...this.selectedLabel]
        res.data.records.forEach(e => {
          if (t.every(ee => e.id !== ee.id)) {
            t.push(e)
          }
        })

        this.labelDisList = t
      })
    },
    handleSearch() {
      this.getLabelDisPage()
    },
    handlerClickLabel(l) {
      const i = this.selectedLabel.findIndex(e => e.id === l.id)
      if (i > -1) {
        this.selectedLabel.splice(i, 1)
      } else {
        this.selectedLabel.push(l)
      }
    },
    handlerConfirm() {
      if (this.selectedLabel.length === 0) {
        this.$toast('请选择标签')
        return
      }
      const data = {
        clueCustomerId: this.clueCustomerId,
        labelIds: this.selectedLabel.map(e => e.id)
      }
      return relaClueCustomerLabel(data).then(res => {
        this.$toast('操作成功!')
        bus.$emit('refreshCustomerItem', {
          title: '添加标签',
          type: 'addTag',
          id: this.clueCustomerId
        })
        this.$router.go(-1)
      })
    }
  }
}

</script>
<style lang='less' scoped>
.add-tag-page{
  --height: calc(100vh - 46px - 80px);
  position: relative;
  height:var(--height);
  display: flex;
  .tag-cate{
    width: calc(35vw);
    height:var(--height);
    background: #fff;
    position: relative;
    &::after{
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      background: #D8DCE3;
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }

  }
  .tag-content{
    flex: 1;
    width:calc(65vw);
    height:var(--height);
    padding-top: 54px;
    position: relative;
    box-sizing: border-box;
  }
}
.cate-list{
  padding: 0 16px;
  .c-item{
    padding: 16px 0;
    line-height: 20px;
    position: relative;
    padding: 16px 0;
    line-height: 20px;
    box-sizing: border-box;
    color: #3C4458;
    font-size: 12px;
    &::after{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #D8DCE3;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    &:last-child::after{
      height: 0;
    }
    &.active{
      color: #16BC83;
      font-weight: bold;
    }
  }
}
.label-search{
  position: fixed;
  top: 46px;
  right: 0;
  width: calc(65vw);
  padding: 10px;
  box-sizing: border-box;
  z-index: 999;
  background: #fff;
  .search-field{
    width: 100%;
    height: 34px;
    background: #F6F7F8;
    border-radius: 17px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  /deep/.van-search__content{
    padding-left: 0;
    .van-field__left-icon{
      display: none;
    }
  }
  /deep/.van-search__action{
    margin-right: 10px;
  }
  .icon-search{
    color: #16BC83;
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}
.label-list{
    padding:16px 16px 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    // background: #fff;
    --width: calc(65vw - 16px - 16px - 20px );
    .c-item{
      display: flex;
      align-items: center;
      justify-content: center;

      width: calc(var(--width) /2);
      height: 36px;
      line-height: 1.2;
      padding: 0 10px;
      margin-bottom: 16px;
      margin-right: 16px;
      text-align: center;
      font-size: 12px;
      color: #3C4458;
      background: rgba(241, 241, 242, 0.5);
      border-radius: 6px;
      box-sizing: border-box;
      overflow: hidden;
      &:nth-child(2n){
        margin-right: 0;
      }
      &.selected{
        background:rgba(22, 188, 131, 0.1);
        color: #16BC83;
        font-weight: bold;
      }
    }
  }
</style>
